<style lang=less>
	@import '../assets/public.less';
	@import './login.less';
	@import './mian.less';
</style>
<template lang="html">
	<div id="main">
		<HeaDer></HeaDer>
		<div class="login_main">
			<div class="header_login">
				<h2 class="welcome_reg">{{$t("login.header[0]")}}</h2><!-- 欢迎登录 -->
			</div>
			<div class="form_warp">
				<div class="content_warp">
					<el-form :label-position="labelPosition" :model="userData" status-icon :rules="rules2" ref="userData" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
						<el-form-item :label='$t("login.list[0]")' prop="mobile"> <!-- 账号 -->
							<el-input v-model.number="userData.mobile" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item :label='$t("login.list[1]")' prop="opwd"><!-- 密码 -->
							<el-input type="password" v-model="userData.opwd" auto-complete="off"></el-input>
						</el-form-item>
						<div v-show="langchange == 'ch' ">
							<el-form-item :label="$t('login.list[3]')" prop="">
								<div class="VelWarp" @touchstart="suc()">
									<Verify @success="successVer()" @click='successVer()' explain="向右滑动解锁" :type="3" width='500'></Verify>
								</div>
							</el-form-item>
						</div>
						<div v-show="langchange == 'en'">
							<el-form-item :label="$t('login.list[3]')" prop="">
								<div class="VelWarp" @touchstart="suc()">
									<Verify @success="successVer()" @click='successVer()' explain="Slide to the right to complete the validatio" :type="3" width='500'></Verify>
								</div>
							</el-form-item>
						</div>
						<div class="imgCode" :style="isDisplay">
							<div class="inp_warp">
								<el-form-item :label='$t("login.list[3]")' prop=""><!-- 验证码 -->
									<el-input type="text" auto-complete="off" v-model="userData.verify" @keyup.enter.native="submitForm('userData')"></el-input>
								</el-form-item>
							</div>
							<div class="img_warp" id="img_warp">
								<img :src="auto_code" @click="change_code()" />
							</div>
						</div>
						<div class="primary_btn">
							<el-form-item>
								<el-button type="primary" @click="submitForm('userData')" :loading="loading">{{$t("login.list[4]")}}</el-button><!-- 登录 -->
								<div class="have">
									<span @click="forget_pwd()">{{$t("login.list[5]")}}</span><!-- 忘记密码？ -->
								</div>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<div class="prompt">
					<div class="warp_prompt">
						<p>{{$t("login.prompt[0]")}}</p><!-- 还不是HUB的用户 -->
						<p>{{$t("login.prompt[1]")}}</p><!-- 立即注册，在全球领先的数字资产交易平台开始交易。 -->
						<span class="go_reg" @click="go_reg">{{$t("login.prompt[2]")}}</span><!-- 免费注册 -->
					</div>
				</div>
			</div>
			<!--根盒子-->
		</div>
		<FooTer></FooTer>
	</div>
</template>
<script>
	import Header1 from "./main/header.vue";
	import Footer1 from "./main/footer.vue";
	import Verify from 'vue2-verify'
	export default {
		data() {
			var _this = this;
			var mobile = (rule, value, callback) => {
				if(!_this.$public.checkMobile(value)) {
					return callback(new Error(this.$t("Verification.phone[0]")));//请输入有效的手机号
				} else {
					callback();
				}

			};
			var validateopwd = (rule, value, callback) => {
				if(!_this.$public.pwd(value)) {
					callback(new Error(this.$t("Verification.Password[0]")));//请输入有效的密码
				} else {
					callback();
				}
			};
			return {
				auto_code: '', //图片验证码
				labelPosition: 'top', //插件自带
				userData: {
					opwd: '', //用户密码
					mobile: '', //用户手机号
					verify: '', //用户验证码
					ispc:1	//判断用户验证码
				},
				rules2: {
					opwd: [{
						validator: validateopwd,
						trigger: 'blur'
					}],
					mobile: [{
						validator: mobile,
						trigger: 'blur'
					}],
				},
				btnCode: {
					time: '获取验证码', //倒计时
					disabled: false
				},
				loading: false, //防止表单重复提交标志位
				unlock: null, //是否完成滑动解锁操作
				nums: 0,
				isDisplay: 'display:none', //控制弹框出现和消失
				langchange: 'cn'
			};
		},
		methods: {
			//注册执行函数
			submitForm(formName) {
				var _this = this;
				_this.$refs[formName].validate((valid) => {
					if(valid) {
						if(!_this.unlock) {
							_this.$public.msg(_this.$t("Verification.type[0]"), 'warning', _this);//请先滑动解锁
						} else if(!_this.userData.verify) {
							_this.$public.msg(_this.$t("Verification.Code[0]"), 'warning', _this);//验证码不能为空
						} else {
							//请求ajax 提交表单
							_this.loading = true;
							_this.$http.post(_this.$http.user_login, _this.userData).then(function(response) {
								_this.loading = false;
								if(response.data.status == "200") {
									//缓存用户唯一编号和token
									sessionStorage.clear();
									sessionStorage.account = response.data.data.account;
									sessionStorage.token = response.data.data.token;
									sessionStorage.mobile = _this.userData.mobile;
									_this.$public.msg(response.data.msg, 'success', _this);
									_this.$public.go('home', 10, _this);
									_this.loading = false;
								} else {
									_this.$public.msg(response.data.msg, 'warning', _this);
								};
							}).catch(function(error) {});
						};
					} else {
						return false
					};
				});
			},
			successVer() {
				$('.verify-move-block').html('<i class="el-icon-check" style="color: #FFFFFF;"></i>')
				$('.verify-msg').html(this.$t("Verification.type[3]"));//验证成功
				$('.verify-msg').css('color', '#333');
				this.valdationed();
			},
			suc() {},
			//点击去登录执行函数
			go_reg() {
				var _this = this;
				_this.$router.push({
					path: '/register'
				});
			},
			//解锁完毕后执行函数
			valdationed() {
				var _this = this;
				_this.unlock = 1; //滑动解锁完毕
				_this.isDisplay = 'display:block';

			},
			//切换图片验证码
			change_code() {
				var _this = this;
				_this.auto_code = _this.$http.auth_code + '?' + _this.nums++;
			},
			//点击忘记密码执行路由跳转函数
			forget_pwd() {
				var _this = this;
				_this.$router.push({
					path: 'forgetpwd'
				})
			},
		},
		mounted: function() {
			sessionStorage.clear();
			this.change_code();
			if(this.$cookies.get('changeBg') == 'night'||!this.$cookies.get('changeBg')) {
				$('#main').removeClass('mainb');
				$('#main').addClass('mainy');
			} else {
				$('#main').removeClass('mainy');
				$('#main').addClass('mainb');
			};
			if(this.$t('login.verify[0]') == 'ch') {
				this.langchange = 'ch';
//				$('.verify-msg').html('ch');
			} else {
//				$('.verify-msg').html('en');
				this.langchange = 'en';
			}
		},
		components: {
			Verify,
			"HeaDer":Header1,
		    "FooTer":Footer1,
		}

	}
</script>
<style>

</style>